import React from 'react';

/**
 * 统一处理空数据显示的工具函数
 * @param value 要显示的值
 * @param placeholder 空值时显示的占位符，默认为"暂无数据"
 * @returns React.ReactNode
 */
export const renderValue = (value: unknown, placeholder: string = '暂无数据'): React.ReactNode => {
  if (value === null || value === undefined || value === '') {
    return <span className="color-#999 text-3.5">{placeholder}</span>;
  }
  return value as React.ReactNode;
};

/**
 * 渲染数字值，0也会显示
 * @param value 数字值
 * @param placeholder 空值时显示的占位符
 * @returns React.ReactNode
 */
export const renderNumberValue = (
  value: number | null | undefined,
  placeholder: string = '暂无数据'
): React.ReactNode => {
  if (value === null || value === undefined) {
    return <span style={{ color: '#999' }}>{placeholder}</span>;
  }
  return value;
};

/**
 * 渲染布尔值
 * @param value 布尔值
 * @param trueText 为true时显示的文本
 * @param falseText 为false时显示的文本
 * @param placeholder 空值时显示的占位符
 * @returns React.ReactNode
 */
export const renderBooleanValue = (
  value: boolean | null | undefined,
  trueText: string = '是',
  falseText: string = '否',
  placeholder: string = '暂无数据'
): React.ReactNode => {
  if (value === null || value === undefined) {
    return <span style={{ color: '#999' }}>{placeholder}</span>;
  }
  return value ? trueText : falseText;
};

/**
 * 渲染日期值
 * @param value 日期值
 * @param placeholder 空值时显示的占位符
 * @returns React.ReactNode
 */
export const renderDateValue = (
  value: string | Date | null | undefined,
  placeholder: string = '暂无数据'
): React.ReactNode => {
  if (!value) {
    return <span style={{ color: '#999' }}>{placeholder}</span>;
  }

  if (typeof value === 'string') {
    return value;
  }

  if (value instanceof Date) {
    return value.toLocaleString();
  }

  return <span style={{ color: '#999' }}>{placeholder}</span>;
};

/**
 * 渲染数组值，用逗号分隔
 * @param value 数组值
 * @param placeholder 空值时显示的占位符
 * @returns React.ReactNode
 */
export const renderArrayValue = (
  value: unknown[] | null | undefined,
  placeholder: string = '暂无数据'
): React.ReactNode => {
  if (!value || value.length === 0) {
    return <span style={{ color: '#999' }}>{placeholder}</span>;
  }
  return value.join(', ');
};

/**
 * 渲染状态值，带颜色
 * @param value 状态值
 * @param statusMap 状态映射对象
 * @param placeholder 空值时显示的占位符
 * @returns React.ReactNode
 */
export const renderStatusValue = (
  value: string | number | null | undefined,
  statusMap: Record<string | number, { text: string; color?: string }>,
  placeholder: string = '暂无数据'
): React.ReactNode => {
  if (value === null || value === undefined) {
    return <span style={{ color: '#999' }}>{placeholder}</span>;
  }

  const status = statusMap[value];
  if (!status) {
    return <span style={{ color: '#999' }}>{placeholder}</span>;
  }

  return <span style={{ color: status.color || '#000' }}>{status.text}</span>;
};

/**
 * 自定义样式的空值显示
 * @param value 要显示的值
 * @param placeholder 占位符文本
 * @param emptyStyle 空值时的样式
 * @returns React.ReactNode
 */
export const renderValueWithStyle = (
  value: unknown,
  placeholder: string = '暂无数据',
  emptyStyle: React.CSSProperties = { color: '#999' }
): React.ReactNode => {
  if (value === null || value === undefined || value === '') {
    return <span style={emptyStyle}>{placeholder}</span>;
  }
  return value as React.ReactNode;
};
